<template>
    <main class="facebook">
        <div class="input">
            <dl>
                <dd v-for="(item, index) in list" :key="index" :class="activeindex == index ? 'active' : ''"
                    @click="activeindex = index">
                    {{ $t(item) }}
                </dd>
            </dl>
            <el-form :model="feedbook" ref="feedbookfrom" label-width="0" style="width: 100%">
                <el-form-item prop="content" :rules="{
                    required: true,
                    message: $t('language.commontips.empty'),
                    trigger: 'blur',
                }">
                    <el-input v-model="feedbook.content" :rows="10" type="textarea"
                        :placeholder="$t('language.feedbook.placehold')" />
                </el-form-item>
            </el-form>
        </div>
        <el-button :loading="loading" :disabled="loading" class="btn" @click="submit">{{ $t('language.feedbook.submit')
            }}</el-button>
        <span></span>
    </main>
</template>
<script setup lang="ts">
import { ref, reactive,computed } from "vue";
let activeindex = ref(0);
import { useI18n } from "vue-i18n";
const { t } = useI18n();
let store=useStore()
let userinfo =computed(()=>store.$state.userinfo)
let feedbook = reactive({
    id: userinfo.value.gameID,
    content: "",
});
let list = reactive(["language.feedbook.feedbookitem1", "language.feedbook.feedbookitem2", "language.feedbook.feedbookitem3"]);
let loading = ref(false);

let feedbookfrom: any = ref(null);
let submit = () => {
    feedbookfrom.value.validate(async (val: any) => {
        if (val) {
            loading.value = true;
            await nextTick()
            await useHttpPOST(`/UserCenter/v1.0/User/Feedback`, feedbook)
                .then((res: any) => {
                    ElMessage.success({
                        message: t("language.commontips.submittip"),
                        type: "success",
                        duration: 1000,
                    });
                })
                .finally(() => {
                    loading.value = false;
                });
        }
    });
};
</script>
<style scoped lang="scss">
:deep(.el-textarea__inner) {
    color: #fff;
}


.facebook {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    .input {
        padding: 20px;

        :deep(.el-textarea__inner) {
            background-color: rgb(21, 21, 23) !important;
            border: none !important;
            box-shadow: none;
            width: 100% !important;
            border-radius: 10px;
        }

        dl {
            @include flex(row, flex-start, center);

            dd {
                padding: 0 20px;
                height: 40px;
                line-height: 40px;
                font-size: 14px;
                color: #b5bab8;
                cursor: pointer;
            }

            .active {
                background-color: rgb(21, 21, 23);
                border-top-left-radius: 7px;
                border-top-right-radius: 7px;
            }
        }
    }

    .btn {
        background: #0a906c;
        color: #fff;
        padding: 0 15px;
        border: none;
        border-radius: 5px;
        text-align: center;
        display: block;
        height: 40px;
        line-height: 40px;
        width: 150px;
        font-size: 16px;
        margin: 0 auto;
    }
}
</style>